<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <div class="search-panel">
        <span>时间区间：</span>
        <el-date-picker
          v-model="date"
          type="daterange"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 250px;"
        />
        <span style="margin-left: 10px;">部门：</span>
        <el-select
          v-model="undertakeDepartment"
          filterable
          clearable
          placeholder="承接部门"
          style="width: 120px"
        >
          <el-option v-for="item in dict.undertakeDepartment" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <span style="margin-left: 10px;">项目类型：</span>
        <el-select v-model="projectType" filterable clearable placeholder="项目类型" style="width: 120px">
          <el-option v-for="item in dict.projectType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <span style="margin-left: 10px;">项目地点：</span>
        <el-select v-model="projectAddressId" filterable clearable placeholder="项目地点" style="width: 120px">
          <el-option v-for="item in dict.projectAddressId" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button type="success" icon="el-icon-search" style="margin-left: 10px;" @click="handleRefreshData">搜索</el-button>
      </div>
      <panel-group :panel-data="panelData" />

      <div v-if="barChartData.xData.length > 0" class="chart-wrapper">
        <bar-chart :bar-chart-data="barChartData" />
      </div>
      <el-empty v-else description="暂无项目数据" />
    </div>
  </div>
</template>

<script>
import crudProject from '@/api/project/project'
import PanelGroup from './PanelGroup'
import BarChart from './BarChart'

const nameMap = {
  'collaborationAmount': '劳务金额',
  'contractAmount': '合同金额',
  'finalAmount': '决算金额',
  'invoiceAmount': '开票金额',
  'receivedAmount': '到账金额',
  'remainBalance': '剩余尾款'
}

export default {
  name: 'ProjectReport',
  components: {
    PanelGroup,
    BarChart
  },
  dicts: ['undertakeDepartment', 'projectType', 'projectAddressId'],
  data() {
    return {
      panelData: {},
      date: [],
      undertakeDepartment: undefined,
      projectType: undefined,
      projectAddressId: undefined,
      barChartData: { xData: [], series: [] }
    }
  },
  created() {
    this.handleRefreshData()
  },
  methods: {
    handleRefreshData() {
      const params = {
        startDate: (this.date || [])[0] ? (this.date || [])[0] + ' 00:00:00' : '',
        endDate: (this.date || [])[1] ? (this.date || [])[0] + ' 23:59:59' : '',
        undertakeDepartment: this.undertakeDepartment,
        projectType: this.projectType,
        projectAddressId: this.projectAddressId
      }
      crudProject.getReportBaseData(params).then(data => {
        this.panelData = data
      })
      crudProject.getBarChartData(params).then(data => {
        if ((data || []).length > 0) {
          const dataParam = {}
          const seriesData = []
          const xData = (data || []).map(item => '[' + item.contractCode + ']' + item.projectName)
          const legend = Object.keys(data[0]).filter(key => key !== 'projectName' && key !== 'contractCode')
          legend.forEach(item => {
            const yData = (data || []).map(el => el[item])
            seriesData.push({
              name: nameMap[item],
              type: 'bar',
              stack: 'vistors',
              barWidth: '20%',
              data: yData,
              animationDuration: 6000
            })
          })
          dataParam.xData = xData
          dataParam.series = seriesData
          this.barChartData = dataParam
        } else {
          this.barChartData = { xData: [], series: [] }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .search-panel {
        margin-bottom: 22px;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }

    .el-empty {
      padding: 80px 0 120px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
